<template>
  <!-- 部门负责人
  1：定义接口api
  2:导入
  3：select获取焦点时调用api
  4:获取数据存储并渲染

  新增接口调用时需要做的
    1：定义新增api
    2:导入新增api
    3:点击确定在表单验证通过后调用api
      调用成功后：
         弹窗关闭
         提示
         弹窗表单数据清空
         父级列表刷新

  编辑接口调用时需要做的
    1：定义编辑api
    2:导入编辑api
    3:点击确定时分场景调用
      调用成功
        弹窗关闭
        提示
        弹窗表单数据清空
        父级列表刷新
  -->
  <el-dialog :title="{add:'新增部门',edit:'编辑部门'}[mode]" width="600px" :visible.sync="show" @close="closeEvent">
    {{ form }}
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model.trim="form.name" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model.trim="form.code" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <el-select v-model="form.manager" placeholder="请选择" @focus="focusEvent">
          <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input
          v-model.trim="form.introduce"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="center">
        <el-button @click="cancelEvent">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { sysUserSimple, companyDepartmentPost, companyDepartmentPut } from '@/api/departments'
export default {
  props: {
    initList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      mode: 'add', // add:新增  edit:编辑
      loading: false,
      show: false,
      userList: [],
      form: {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      },
      rules: {
        name: [{ required: true, message: '必填', trigger: 'change' }, {
          min: 1, max: 50, message: '请输入1-50个字符', trigger: 'change'
        },
        {
          validator: (rule, value, callback) => {
            let newArr = []
            if (this.mode === 'add') {
              // 点击项的子集部门不可重名
              // 1：找出子集部门  2：验证是否重名
              newArr = this.initList.filter(item => item.pid === this.form.pid)
              // every
              // const bol = newArr.every(item => item.name !== value)
              // bol ? callback() : callback(new Error('请不要输入重名的部门名称:' + value))
              // some
              // const bol = newArr.some(item => item.name === value)
              // bol ? callback(new Error('请不要输入重名的部门名称:' + value)) : callback()
            } else if (this.mode === 'edit') {
              // 编辑表单验证
              newArr = this.initList.filter(item => item.pid === this.form.pid && item.id !== this.form.id)
              // const newArr2 = newArr.filter(item => item.id !== this.form.id)
            }
            const bol = newArr.some(item => item.name === value)
            bol ? callback(new Error('请不要输入重名的部门名称:' + value)) : callback()
          },
          trigger: 'change'
        }
        ], //	string	非必须		部门名称
        code: [{ required: true, message: '必填', trigger: 'change' }, {
          min: 1, max: 50, message: '请输入1-50个字符', trigger: 'change'
        },
        { validator: (rule, value, callback) => {
          if (this.mode === 'add') {
            // value:1001
            // initList:[{code:1001},{code:'XZB'}...]
            // 目标：验证value在initList中的code是否存在
            // every:数组中每一个项都满足要求，它就返回true
            // const bol = this.initList.every(item => item.code !== value)
            // bol ? callback() : callback(new Error('请不要输入重复的部门编码:' + value))
            // some:数组中只要有一个项满足要求，它就返回true
            // const bol = this.initList.some(item => item.code === value)
            // bol ? callback(new Error('请不要输入重复的部门编码:' + value)) : callback()
            // filter
            const newArr = this.initList.filter(item => item.code === value)
            newArr.length === 0 ? callback() : callback(new Error('请不要输入重复的部门编码:' + value))
          } else if (this.mode === 'edit') {
            // 排除自己
            const newArr = this.initList.filter(item => item.id !== this.form.id)
            // some
            // const bol = newArr.some(item => item.code === value)
            // bol ? callback(new Error('请不要输入重复的部门编码:' + value)) : callback()
            // every
            // const bol = newArr.every(item => item.code !== value)
            // bol ? callback() : callback(new Error('请不要输入重复的部门编码:' + value))
            // filter
            const newArr2 = newArr.filter(item => item.code === value)
            newArr2.length === 0 ? callback() : callback(new Error('请不要输入重复的部门编码:' + value))
          }
        }, trigger: 'change' }
        ], //	string	非必须		部门编码，同级部门不可重复
        manager: [{ required: true, message: '必填', trigger: 'change' }], //	string	非必须		负责人名称
        introduce: [{ required: true, message: '必填', trigger: 'change' }, {
          min: 1, max: 300, message: '请输入1-50个字符', trigger: 'change'
        }] //	string	非必须		介绍
      }
    }
  },
  methods: {
    async focusEvent() {
      if (this.userList.length === 0) {
        const res = await sysUserSimple()
        this.userList = res.data
        console.log('员工列表', res)
      }
    },
    // 确定点击事件
    async submit() {
      await this.$refs.form.validate()
      this.loading = true
      try {
        if (this.mode === 'add') {
          await companyDepartmentPost(this.form)
          // 提示
          this.$message.success('新增部门成功')
        } else if (this.mode === 'edit') {
          await companyDepartmentPut(this.form)
          // 提示
          this.$message.success('编辑部门成功')
        }
        // 关闭弹框
        this.show = false
        // 刷新父级列表
        this.$emit('getData')
      } finally {
        this.loading = false
      }
    },
    cancelEvent() {
      // 关闭弹框
      this.show = false
      // 清空表单数据
      // this.$refs.form.resetFields()
    },
    closeEvent() {
      // 作用：重置表单内的值为初始值（初次渲染时的值====第一次打开弹框时表单的值），同时移除表单校验
      this.$refs.form.resetFields()
      this.form = {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.center{
    text-align: center;
}
</style>
